<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
  <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="Ext.ux.GMapPanel3.js"></script>
  
  <script type="text/javascript">
  
		Ext.onReady(function() {

			var barcode = "http://images.cyberfloralouisiana.com/images/specimensheets/nlu/0/6/33/88/";
			
			var imgTiles = new google.maps.ImageMapType({
				getTileUrl: function(ll, z) {
					var X = ll.x % (1 << z);  // wrap
					var path = barcode + "google_tiles/" + (5-z) + "/tile_"+ (5-z) + "_" + X + "_" + ll.y + ".jpg";
					return path;				
				},
				tileSize: new google.maps.Size(256, 256),
				isPng: false,
				maxZoom: 18,
				name: "Image",
				alt: "Specimen Sheet Image"
			});

			mp = new Ext.ux.GMapPanel({
				zoomLevel: 2,
				id: 'my_map',
				border: true,
				mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
				mapControls: ['GSmallMapControl','GMapTypeControl'],
				setCenter: {
					lat: 30,
					lng: -90
				},
				width: 600,
				height: 400,
				title: 'Specimen Image',
				applyTo: Ext.getBody(),
				listeners: {
          'mapready': function(map){
						map.getMap().mapTypes.set('image', imgTiles);
						map.getMap().setMapTypeId('image');
          }
        }				
			});


console.log(mp);			
		});
  </script>
</head>

<body>
	<div id="tmpMap">
  </div>
</body>
</html>
